<template>
  <border
    class="overview-of-rental-income"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="content-top">
        <message :messageImgSrc="message[0].messageImgSrc"
                 :messageNumber="message[0].messageNumber"
                 :messageName="message[0].messageName"></message>
        <message :messageImgSrc="message[1].messageImgSrc"
                 :messageNumber="message[1].messageNumber"
                 :messageName="message[1].messageName"></message>
      </div>
      <div class="content-bottom">
        <bar-line ref="barLine"
                  :title="barLineConfig.title"
                  :axis="barLineConfig.axis"
                  :xAxis="barLineConfig.xAxis"
                  :yAxis="barLineConfig.yAxis"
                  :dataZoom="barLineConfig.dataZoom"
                  :grid="barLineConfig.grid"
                  :config="barLineConfig.config"
                  :tooltipsConfig="barLineConfig.tooltipsConfig"
                  :seriesData="barLineConfig.seriesData"></bar-line>
        <div class="octagon-list">
          <octagon
            v-for="(item, index) in octagonMessage.iconSrc"
            :key="index"
            :octagonImg="octagonMessage.octagonImg"
            :iconSrc="item"
            :octagonName="octagonMessage.octagonName[index]"
            :octagonNumber="octagonMessage.octagonNumber[index]"
            :octagonUnit="octagonMessage.octagonUnit[index]">
          </octagon>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import BarLine from './../components/BarLine.vue'
import Message from './../components/Message.vue'
import Octagon from './../components/Octagon.vue'
export default {
  name: 'overviewOfRentalIncome',
  components: {
    Border,
    BarLine,
    Message,
    Octagon
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '租金收入概况',
        goPageUrl: ''
      },
      message: [
        {
          messageName: '本年租金收入（万元）',
          messageNumber: 0,
          messageImgSrc: require('./../../assets/images/module/background/octagon230x87.png')
        },
        {
          messageName: '本月租金收入（万元）',
          messageNumber: 0,
          messageImgSrc: require('./../../assets/images/module/background/octagon230x87.png')
        }
      ],
      octagonMessage: {
        octagonImg: require('./../../assets/images/module/background/octagon180x82.png'),
        iconSrc: [require('./../../assets/images/module/icon/year-on-year.png'),
          require('./../../assets/images/module/icon/chain-ratio.png')],
        octagonName: ['同比', '环比'],
        octagonNumber: ['', ''],
        octagonUnit: ['%', '%']
      },
      barLineConfig: {
        title: {
          text: ''
        },
        axis: {
          xAxisNameLength: 6,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: false,
          right: 10,
          endValue: 4
        },
        grid: {
          bottom: 10
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: ['本月收入', '上月收入 ', '去年同期']
        },
        yAxis: {
          splitNumber: 4,
          name: '万元',
          nameTextStyle: {
            color: '#FFFFFF',
            align: 'left'
          }
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb'],
          symbol: '万元'
        },
        seriesData: []
      },
      apiData: [],
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.operationApi.businessLeaseFee({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.apiData = data
            this.message[0].messageNumber = parseInt(data.yearFee / 1000000)
            this.message[1].messageNumber = parseInt(data.currentMonthFee / 1000000)
            if (Number(data.yearOnYear) > 200) {
              data.yearOnYear = '>200'
            }
            if (Number(data.monthOnMonth) > 200) {
              data.monthOnMonth = '>200'
            }
            this.octagonMessage.octagonNumber = [data.yearOnYear, data.monthOnMonth]
          } else {
            this.apiData = []
            this.message[0].messageNumber = 0
            this.message[1].messageNumber = 0
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = []
          this.message[0].messageNumber = 0
          this.message[1].messageNumber = 0
          if (!isRefresh) {
            this.handleData()
          }
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let seriesData = []
      if (JSON.stringify(data) !== '{}') {
        seriesData = [parseInt(data.currentMonthFee / 1000000), parseInt(data.lastMonthFee / 1000000),
          parseInt(data.previousMonthFee / 1000000)]
      }
      this.barLineConfig.seriesData = [
        {
          data: seriesData,
          name: '',
          colorIndex: 0,
          isBar: true
        }
      ]
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.overviewOfRentalIncomeTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.overviewOfRentalIncomeTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.overviewOfRentalIncomeTimer)
  }
}
</script>
<style lang="scss" scoped>
  .overview-of-rental-income {
    .module-content {
      width: 100%;
      height: 100%;
      .content-top {
        width: 100%;
        overflow: hidden;
        .message {
          width: calc(50% - 52px);
          margin: 10px 26px 0;
          float: left;
          &:last-of-type {
            float: right;
            margin: 10px 26px 0;
          }
        }
      }
      .content-bottom {
        width: 100%;
        height: calc(74% - 10px);
        margin-top: 10px;
        .bar-line {
          width: 60%;
          height: 100%;
          float: left;
        }
        .octagon-list {
          width: calc(40% - 26px);
          height: 100%;
          float: left;
          .octagon {
            width: 100%;
            margin-bottom: 15px;
            & /deep/ .octagon-icon-img {
              width: 40px;
              height: auto;
              margin-left: 10px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 1890px) {
    .overview-of-rental-income {
      .module-content {
        .module-content-left {
          .octagon-list {
            .octagon {
              & /deep/ .octagon-icon-img {
                width: 48px;
              }
            }
          }
        }
      }
    }
  }
</style>
